<!--
 * @Description: 绑定渠道商
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2021-07-04 13:17:22
 * @LastEditTime: 2023-07-14 14:51:06
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
-->

<template>
  <div class="lb-appclass-classroom-list">
    <top-nav :title="navTitle" :isBack="true" />
    <div class="page-main">
      <el-row class="page-top-operate">
        <lb-button
          size="medium"
          type="primary"
          icon="el-icon-plus"
          @click="toShowDialog('channel')"
          v-hasPermi="`SalesmanExamine-bindChannel`"
          >{{ $t('action.bindChannel') }}</lb-button
        >
      </el-row>
      <el-table
        v-loading="loading.list"
        :data="tableData.list"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" fixed></el-table-column>
        <el-table-column prop="user_id" label="用户ID"></el-table-column>
        <el-table-column prop="avatarUrl" label="头像">
          <template slot-scope="scope">
            <lb-image :src="scope.row.avatarUrl" />
          </template>
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="昵称"
          :min-width="120"
        ></el-table-column>
        <el-table-column
          prop="user_name"
          label="姓名"
          :min-width="120"
        ></el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号"
          :min-width="120"
        ></el-table-column>
        <el-table-column
          prop="cate_text"
          label="申请渠道"
          :min-width="120"
        ></el-table-column>
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            <div class="table-operate">
              <lb-button
                size="mini"
                plain
                type="primary"
                @click="toShowDialog('salesman', scope.row)"
                v-hasPermi="`SalesmanExamine-resetSalesman`"
                >{{ $t('action.resetSalesman') }}</lb-button
              >
              <lb-button
                size="mini"
                plain
                type="danger"
                @click="confirmDel(scope.row.id)"
                v-hasPermi="`SalesmanExamine-deleteChannel`"
                >{{ $t('action.deleteChannel') }}</lb-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <lb-page
        :batch="false"
        :page="searchForm.list.page"
        :pageSize="searchForm.list.limit"
        :total="total.list"
        @handleSizeChange="handleSizeChange($event, 'list')"
        @handleCurrentChange="handleCurrentChange($event, 'list')"
      >
      </lb-page>

      <el-dialog
        :title="$t('action.bindChannel')"
        :visible.sync="showDialog.channel"
        width="900px"
        center
      >
        <el-row class="page-search-form">
          <el-form
            @submit.native.prevent
            :inline="true"
            :model="searchForm.channel"
            ref="channelForm"
            class="dialog-form"
          >
            <el-form-item label="输入查询" prop="name">
              <el-input
                v-model="searchForm.channel.name"
                placeholder="请输入姓名/手机号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <lb-button
                size="medium"
                type="primary"
                icon="el-icon-search"
                style="margin-right: 5px"
                @click="getTableDataList(1, 'channel')"
                >{{ $t('action.search') }}</lb-button
              >
              <lb-button
                size="medium"
                icon="el-icon-refresh-left"
                style="margin-right: 5px"
                @click="resetForm('channel')"
                >{{ $t('action.reset') }}</lb-button
              >
            </el-form-item>
          </el-form>
        </el-row>
        <el-table
          v-loading="loading.channel"
          :data="tableData.channel"
          ref="multipleTable"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange($event, 'multipleSelection')"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="ID" fixed></el-table-column>
          <el-table-column prop="user_id" label="用户ID"></el-table-column>
          <el-table-column prop="avatarUrl" label="头像">
            <template slot-scope="scope">
              <lb-image :src="scope.row.avatarUrl" />
            </template>
          </el-table-column>
          <el-table-column
            prop="nickName"
            label="昵称"
            :min-width="120"
          ></el-table-column>
          <el-table-column
            prop="user_name"
            label="姓名"
            :min-width="120"
          ></el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号"
            :min-width="120"
          ></el-table-column>
          <el-table-column
            prop="cate_text"
            label="申请渠道"
            :min-width="120"
          ></el-table-column>
        </el-table>
        <lb-page
          :batch="false"
          :page="searchForm.channel.page"
          :pageSize="searchForm.channel.limit"
          :total="total.channel"
          @handleSizeChange="handleSizeChange($event, 'channel')"
          @handleCurrentChange="handleCurrentChange($event, 'channel')"
        >
        </lb-page>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog.channel = false">{{
            $t('action.cancel')
          }}</el-button>
          <el-button
            type="primary"
            @click="handleDialogConfirm('channel')"
            v-preventReClick
            >{{ $t('action.comfirm') }}</el-button
          >
        </span>
      </el-dialog>

      <el-dialog
        :title="$t('action.resetSalesman')"
        :visible.sync="showDialog.salesman"
        width="900px"
        center
      >
        <el-row class="page-search-form">
          <el-form
            @submit.native.prevent
            :inline="true"
            :model="searchForm.salesman"
            ref="salesmanForm"
            class="dialog-form"
          >
            <el-form-item label="输入查询" prop="name">
              <el-input
                v-model="searchForm.salesman.name"
                placeholder="请输入姓名/手机号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <lb-button
                size="medium"
                type="primary"
                icon="el-icon-search"
                style="margin-right: 5px"
                @click="getTableDataList(1, 'salesman')"
                >{{ $t('action.search') }}</lb-button
              >
              <lb-button
                size="medium"
                icon="el-icon-refresh-left"
                style="margin-right: 5px"
                @click="resetForm('salesman')"
                >{{ $t('action.reset') }}</lb-button
              >
            </el-form-item>
          </el-form>
        </el-row>
        <el-table
          v-loading="loading.salesman"
          :data="tableData.salesman"
          ref="singleTable"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          tooltip-effect="dark"
          style="width: 100%"
          highlight-current-row
          @current-change="handleSelectionChange($event, 'currentRow')"
        >
          <el-table-column prop="id" label="ID" fixed></el-table-column>
          <el-table-column prop="user_id" label="用户ID"></el-table-column>
          <el-table-column prop="avatarUrl" label="头像">
            <template slot-scope="scope">
              <lb-image :src="scope.row.avatarUrl" />
            </template>
          </el-table-column>
          <el-table-column
            prop="nickName"
            label="昵称"
            :min-width="120"
          ></el-table-column>
          <el-table-column
            prop="user_name"
            label="姓名"
            :min-width="120"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            :min-width="120"
          ></el-table-column>
          <el-table-column
            prop="admin_name"
            label="所属代理商"
            :min-width="120"
          ></el-table-column>
        </el-table>
        <lb-page
          :batch="false"
          :page="searchForm.salesman.page"
          :pageSize="searchForm.salesman.limit"
          :total="total.salesman"
          @handleSizeChange="handleSizeChange($event, 'salesman')"
          @handleCurrentChange="handleCurrentChange($event, 'salesman')"
        >
        </lb-page>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog.salesman = false">{{
            $t('action.cancel')
          }}</el-button>
          <el-button
            type="primary"
            @click="handleDialogConfirm('salesman')"
            v-preventReClick
            >{{ $t('action.comfirm') }}</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  components: {},
  data () {
    return {
      options: {},
      navTitle: '',
      loading: { list: false, channel: false, salesman: false },
      searchForm: {
        list: {
          page: 1,
          limit: 10,
          salesman_id: ''
        },
        channel: {
          page: 1,
          limit: 10,
          status: 2,
          no_salesman: 1,
          name: ''
        },
        salesman: {
          page: 1,
          limit: 10,
          status: 2,
          salesman_id: '',
          name: ''
        }
      },
      tableData: { list: [], channel: [], salesman: [] },
      total: { list: 0, channel: 0, salesman: 0 },
      showDialog: { channel: false, salesman: false },
      multipleSelection: [],
      currentRow: {},
      channelForm: {
        salesman_id: 0,
        channel_id: []
      },
      salesmanForm: {
        id: 0,
        salesman_id: 0
      }
    }
  },
  async created () {
    let { id, name } = this.$route.query
    this.options = { id, name }
    this.searchForm.list.salesman_id = id
    this.searchForm.salesman.salesman_id = id
    this.navTitle = `“${name}”绑定的渠道商数据`
    this.getTableDataList(1, 'list')
  },
  methods: {
    resetForm (form) {
      let name = `${form}Form`
      this.$refs[name].resetFields()
      this.getTableDataList(1, form)
    },
    handleSizeChange (val, key) {
      this.searchForm[key].limit = val
      this.handleCurrentChange(1, key)
    },
    handleCurrentChange (val, key) {
      this.searchForm[key].page = val
      this.getTableDataList('', key)
    },
    async getTableDataList (flag, key) {
      if (flag) this.searchForm[key].page = 1
      this.loading[key] = true
      let searchForm = JSON.parse(JSON.stringify(this.searchForm[key]))
      let methodArr = {
        list: { methodKey: 'channel', methodModel: 'channelList' },
        channel: { methodKey: 'channel', methodModel: 'channelList' },
        salesman: { methodKey: 'salesman', methodModel: 'salesmanList' }
      }
      let { methodKey, methodModel } = methodArr[key]
      let { code, data } = await this.$api[methodKey][methodModel](searchForm)
      this.loading[key] = false
      if (code !== 200) return
      this.tableData[key] = data.data
      this.total[key] = data.total
    },
    /**
     * @method: 删除
     * @param {*} id
     */
    confirmDel (id) {
      let { name } = this.options
      const h = this.$createElement
      this.$confirm(h('p', null, [
        h('p', null, this.$t('tips.confirmDelete')),
        h('p', { style: 'font-size:13px;line-height:1.2;color: red' }, `删除后，该渠道商下产生的订单，业务员【${name}】将不再参与分佣！`)
      ]), this.$t('tips.reminder'), {
        confirmButtonText: this.$t('action.comfirm'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        this.updateItem(id, 'list')
      })
    },
    /**
     * @method: 上下架
     */
    async updateItem (id, key) {
      this.$api.channel.channelUpdate({ id, salesman_id: 0 }).then(res => {
        if (res.code === 200) {
          this.$message.success(this.$t('tips.successDel'))
          this.searchForm[key].page = this.searchForm[key].page < Math.ceil((this.total[key] - 1) / this.searchForm[key].limit) ? this.searchForm[key].page : Math.ceil((this.total[key] - 1) / this.searchForm[key].limit)
        }
        this.getTableDataList('', key)
      })
    },
    async toShowDialog (key, item = {}) {
      item = JSON.parse(JSON.stringify(item))
      if (key === 'channel') {
        item.channel = []
        item.salesman_id = this.options.id
      }
      for (let i in this[`${key}Form`]) {
        this[`${key}Form`][i] = item[i]
      }
      this.searchForm[key].name = ''
      await this.getTableDataList(1, key)
      this.showDialog[key] = !this.showDialog[key]
    },
    handleSelectionChange (val, key) {
      this[key] = val
    },
    handleDialogConfirm (key) {
      if (key === 'channel') {
        if (this.multipleSelection.length === 0) {
          this.$message.error(`请选择渠道商`)
          return
        }
        let ids = this.multipleSelection.map(item => {
          return item.id
        })
        this.channelForm.channel_id = ids
      } else {
        if (this.currentRow === null || !this.currentRow.id) {
          this.$message.error(`请选择业务员`)
          return
        }
        let { id = 0 } = this.currentRow
        this.salesmanForm.salesman_id = id
      }
      let subForm = JSON.parse(JSON.stringify(this[`${key}Form`]))
      let methodModel = key === 'channel' ? 'bindSalesman' : 'channelUpdate'
      this.$api.channel[methodModel](subForm).then((res) => {
        if (res.code === 200) {
          this.$message.success(this.$t('tips.successSub'))
          this.showDialog[key] = false
          this.getTableDataList(1, 'list')
        }
      })
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-appclass-classroom-list {
  width: 100%;
  .page-main {
    width: 100%;
    .el-input,
    .el-select,
    .el-input-number {
      width: 200px;
    }
    .dialog-form {
      .el-input,
      .el-select,
      .el-input-number {
        width: 300px;
      }
    }
  }
}
</style>
